<template>
    <!-- 车辆详情 -->
    <view class="page-container">
        <scroll-view scroll-y class="content-scroll">
            <view class="p-[32rpx]">
                <!-- 用户信息 -->
                <view class="user-info-card bg-white p-[24rpx] rounded-[16rpx]">
                    <view class="flex items-center justify-between">
                        <view class="flex items-center">
                            <up-avatar size="80rpx" :src="carInfo?.avatar"></up-avatar>
                            <view class="ml-[16rpx]">
                                <view class="text-[28rpx] font-semibold">{{ carInfo?.userName }}</view>
                                <view
                                    class="inline-block bg-[#FFF5E6] text-[#FFAF38] text-[20rpx] px-[12rpx] py-[4rpx] rounded-[4rpx] mt-[8rpx]">
                                    {{ carInfo?.informationType == 0 ? '求购' : carInfo?.informationType == 1 ? '求购' :
                                        carInfo?.informationType == 2 ?
                                            '批发' : carInfo?.informationType == 3 ? '询价' : '' }}</view>
                            </view>
                        </view>
                        <!-- <view class="text-[24rpx] text-gray-500">保定 · 12分钟前</view> -->
                    </view>

                    <!-- 车辆描述 -->
                    <view class="mt-[24rpx] text-[28rpx] text-[#000000] font-[400] font-[PingFangSC]">
                        {{ carInfo?.brandModel }}
                    </view>

                    <!-- 车辆图片 -->
                    <view class="mt-[24rpx] flex flex-wrap">
                        <!-- <image src="@/static/images/game_logo/patw.png" class="w-[278rpx] h-[204rpx] rounded-[12rpx]">
                        </image> -->
                   
                        <view v-if="carInfo?.image?.split(',')?.length > 0" class="mt-[20rpx]">
                            <up-album multipleSize="204rpx" maxCount="9" :urls="carInfo?.image?.split(',')"></up-album>
                            <!-- <image v-for="item in carInfo?.image?.split(',')" :src="item"
                                class="w-[278rpx] h-[204rpx] rounded-[12rpx] mr-[12rpx] mb-[12rpx]">
                            </image> -->
                        </view>
                    </view>

                    <!-- 车辆标签和信息 -->
                    <!-- <view class="mt-[24rpx] flex justify-between items-center">
                        <view class="flex items-center">
                            <view class="tag-item">国六</view>
                            <view class="tag-item ml-[16rpx]">2.0T</view>
                        </view>
                        <view class="text-[24rpx] text-gray-500">2022-01-01 / 7.9万公里</view>
                    </view> -->

                    <!-- 操作按钮 -->
                    <view class="mt-[32rpx] flex items-center justify-between border-t border-gray-100 pt-[24rpx]">
                        <view  @click="kfa" class="action-btn">
                            <uni-icons type="chat" size="20" color="#666"></uni-icons>
                            <text class="ml-[8rpx]">私聊TA</text>
                        </view>
                        <view class="flex items-center">
                            <view  @click="kfa" class="action-btn">
                                <image src="@/static/images/icon/weixin.png" class="w-[40rpx] h-[40rpx]"></image>
                                <text class="ml-[8rpx]">微信</text>
                            </view>
                            <view @click="makePhoneCall"  class="action-btn ml-[44rpx]">
                                <image src="@/static/images/icon/dhdh.png" class="w-[44rpx] h-[44rpx]"></image>
                            </view>
                        </view>

                    </view>
                </view>

                <!-- 咨询区域 -->
                <!-- <view class="consult-card bg-white p-[24rpx] rounded-[16rpx] mt-[24rpx]">
                    <view class="flex items-center justify-between">
                        <view class="flex items-center">
                            <image src="/static/images/avatar-placeholder-female.png"
                                class="w-[64rpx] h-[64rpx] rounded-full mr-[16rpx]"></image>
                            <view
                                class="flex-1 bg-gray-100 rounded-[32rpx] px-[24rpx] py-[16rpx] text-gray-400 text-[24rpx]">
                                去写一条咨询
                            </view>
                        </view>
                        <view class="w-[152rpx] h-[72rpx] py-[20rpx]">
                            <up-button @click="showTip = true" type="primary" text="温馨提示"
                                :customStyle="{
                                    background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFEAA2 100%)',
                                    borderRadius: '12rpx',
                                    fontSize: '28rpx',
                                    border: '0',
                                    color: '#000000',
                                    fontWeight: '500',
                                }"></up-button>
                        </view>
                    </view>
                    
                    <view class="empty-state mt-[40rpx] text-center">
                        <image src="/static/images/empty-content.png" class="w-[300rpx] h-[200rpx] mx-auto"></image>
                        <view class="text-gray-400 text-[24rpx] mt-[16rpx]">还没有内容内容</view>
                    </view>
                </view>  -->
            </view>
        </scroll-view>

        <!-- 底部操作栏 -->
        <!-- <view class="w-[100%] bg-[#fff] flex justify-center items-center p-[36rpx]">
            <view class="bottom-bar-item">
                <uni-icons type="chat" size="24" color="#333"></uni-icons>
                <text class="text-[22rpx] mt-[4rpx]">私聊</text>
            </view>
            <view class="bottom-bar-item relative">
                <uni-icons type="redo" size="24" color="#333"></uni-icons>
                <text class="text-[22rpx] mt-[4rpx]">分享</text>
                <view class="share-badge"></view>
            </view>
            <button @click="makePhoneCall"  class="contact-btn">电话联系</button>
        </view> -->
    </view>
    <!-- 温馨提示弹窗 -->
    <up-popup v-model:show="showTip" mode="center" round="24" :maskCloseAble="true">
        <view class="tip-modal w-[618rpx] h-[812rpx] pt-[20rpx] px-[20rpx]">
            <view class="flex justify-between items-center mb-[24rpx]">
                <view>
                    <view class="text-[32rpx] text-[#000000] font-[500] font-[PingFangSC]">温馨提示</view>
                    <view class="w-[84rpx] h-[8rpx] bg-[#FFEFB8]"></view>

                </view>
                <uni-icons type="closeempty" size="36rpx" color="#000" @click="showTip = false"></uni-icons>
            </view>
            <view class="text-[28rpx] text-[#000000] font-[500] mb-[24rpx]">
                为更好保障交易双方的权益，买卖双方尽可能规范交易或使用平台保障服务
            </view>
            <view class="tip-list">
                <view class="tip-item flex mb-[20rpx]">
                    <image src="@/static/images/game_logo/01.png" class="w-[56rpx] h-[36rpx] mr-[16rpx]"></image>
                    <view class="text-[28rpx] text-[#A2A2A2] flex-1">
                        卖主需如实披露车况和手续等信息，买方在交易前最好到现场对配置、车况、手续、公里数等情况实地确认，<text
                            class="font-bold text-[#000000]">须对车辆检测。</text>
                    </view>
                </view>
                <view class="tip-item flex mb-[20rpx]">
                    <image src="@/static/images/game_logo/02.png" class="w-[56rpx] h-[36rpx] mr-[16rpx]"></image>
                    <view class="text-[28rpx] text-[#A2A2A2] flex-1">
                        买方打定金或者车款时，须认真核实对方信息（车行、身份证），<text class="font-bold text-[#000000]">签订交易电子合同，使用车易定金保障。</text>
                    </view>
                </view>
                <view class="tip-item flex mb-[20rpx]">
                    <image src="@/static/images/game_logo/03.png" class="w-[56rpx] h-[36rpx] mr-[16rpx]"></image>
                    <view class="text-[28rpx] text-[#A2A2A2] flex-1">
                        卖方接收车款时，必须先签订交易合同来规范交易<text class="font-bold text-[#000000]">并确认付款方与交易方是一致的。</text>
                    </view>
                </view>
                <view class="tip-item mb-[34rpx] flex">
                    <image src="@/static/images/game_logo/04.png" class="w-[56rpx] h-[36rpx] mr-[16rpx]"></image>
                    <view class="text-[28rpx] text-[#000000] font-bold flex-1">
                        不要怕麻烦，尽可能使用平台的电子合同、定金保障、车款支付及检测服务，以避免买卖双方资金损失或者交易纠纷。
                    </view>
                </view>
            </view>
        </view>
    </up-popup>
    
</template>


<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { whoableDetail, whoableList } from '@/api/whoable'
const showTip = ref(false);


const carInfo = ref({})
const carList = ref([])
const goBack = () => {
    uni.navigateBack();
};
onLoad(async (options) => {
    console.log(options);
    const { data } = await whoableDetail({
        id: options.id
    })
    carInfo.value = data
});
//提示功能在开发中
const kfa = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none',
    duration: 2000
  })
}
// 拨打电话
const makePhoneCall = () => {
  if (!carInfo.value.phone) {
    uni.showToast({
      title: '电话号码不可用',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  
  uni.makePhoneCall({
    phoneNumber:carInfo.value.phone,
    success: () => {
      console.log('拨打电话成功');
    },
    fail: (err) => {
      console.error('拨打电话失败', err);
    }
  });
}

</script>

<style scoped lang="scss">
.page-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

// .status_bar { // 如果使用自定义导航栏，需要获取状态栏高度
//     height: var(--status-bar-height);
//     width: 100%;
// }

.content-scroll {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 120rpx; // 为底部操作栏留出空间
}

.user-info-card,
.consult-card {
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.tag-item {
    background-color: #f0f0f0;
    color: #666;
    font-size: 22rpx;
    padding: 6rpx 12rpx;
    border-radius: 4rpx;
}

.action-btn {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 26rpx;
}

.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 32rpx;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    padding-bottom: constant(safe-area-inset-bottom); // 适配iPhone X等机型
    padding-bottom: env(safe-area-inset-bottom); // 适配iPhone X等机型
}

.bottom-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333;
}

.share-badge {
    position: absolute;
    top: -4rpx;
    right: -8rpx;
    width: 20rpx;
    height: 20rpx;
    background-color: #FFD161;
    border-radius: 50%;
    border: 2rpx solid #fff;
}

.contact-btn {
    background: linear-gradient(90deg, #333333 0%, #5A5A5A 100%);
    color: #fff;
    font-size: 28rpx;
    height: 72rpx;
    line-height: 72rpx;
    border-radius: 36rpx;
    padding: 0 60rpx;
    margin: 0; // 去除默认边距
}

// 确保图片路径正确，如果图片在static目录下，路径应为 /static/...
// 例如：/static/images/avatar-placeholder.png
// 如果图片是网络图片，直接使用URL</style>